// Web Component手写组件
class Btn extends HTMLElement {
    constructor() {
        super()
        const shaDom = this.attachShadow({
            mode: "open"
        })

        this.p = this.h('p')
        this.p.innerText = '小满'
        this.p.setAttribute('style', 'width:20epx;height:200px;border:1px solid black')

        shaDom.appendChild(this.p)
    }
    h(el) {
        return document.createElement(el)
    }
}
window.customElements.define('xiaoman-btn', Btn)

class Btn2 extends HTMLElement {
    constructor() {
        super()
        const shaDom = this.attachShadow({
            mode: "open"
        })

        this.template.innerHTML = `
        <style>
            div{
                width: 200px;
                height: 200px;
                border: 1px solid black;}
        </style>
        <div>小满</div>
        `


        shaDom.appendChild(this.p)
    }
    h(el) {
        return document.createElement(el)
    }
    connectedcallback () {
        console.log('已经j加载')
        }
        //当自定义元素与文档DOM断开连接时被调用。
        disconnectedCallback () {
        console.log('已经断开')
        }
        //当自定义元素被移动到新文档时被调用
        adoptedCal1back() {i
        console.log('被移动')
        }
        //当自定义元素的一个属性被增加、移除或更改时被调用
        attributeChangedcallback () {
        console.log('被改变')
        }
        
}
window.customElements.define('xiaoman-btn2', Btn2)
